<html lang="en">

<head>
    <title>通用型饿了么满减助手</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/base.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.0.4/dist/gsap.min.js"></script>
</head>

<body>
    <!-- for copy -->
    <textarea id="copy-helper" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"></textarea>

    <div id="demo">
        <div id="top-background-0"></div>
        <div id="top-background-1"></div>

        <div class="center-wrapper">
            <div class="card-list-wrapper" id="card-list" v-if="!got_suggest">
                <label class="card" for="shop-code-input">商店ID</label>
                <input id="shop-code-input" class="card" v-model="shop_code">
                <label class="card" for="reduction-target-input">满减目标</label>
                <input id="reduction-target-input" class="card" v-model="reduction_target" type="number">
                <label class="card" for="base-menu-input">必选菜品</label>
                <input id="base-menu-input" class="card" v-model="base_menu">
                <label class="card" for="block-menu-input">黑名单</label>
                <textarea id="block-menu-input" class="card" v-model="block_menu"></textarea>
                <button id="search-button" class="card" v-on:click="get_suggest">获取满减建议</button>
            </div>
            <div class="card-list-wrapper" id="card-list" v-else>
                <p class="hint card">点击下方的菜单即可复制</p>
                <div id="suggest" class="card" v-on:click="copy_suggest">
                    <div class="suggest-entry" v-for="entry in suggest.entries">
                        <p class="suggest-entry-category">{{entry.category}}</p>
                        <div v-for="food in entry.foods" class="food-entry">
                            <p class="food-entry-left">{{food.name}}</p>
                            <p class="food-entry-top-right">单价：{{food.price}}</p>
                            <p class="food-entry-bottom-right">包装费：{{food.packing_fee}}</p>
                        </div>
                    </div>
                    <p class="suggest-total">{{suggest.total}}</p>
                </div>
                <button id="clear-button" class="card" v-on:click="clear_suggest">再来一单</button>
            </div>

        </div>
    </div>

    <script src="./js/base.js"></script>
</body>

</html>